<template>
    <div class="progress-bar-container">
      <div class="progress-bar" :style="{ background: getGradient() }">
        <div
          v-for="(item, index) in data1"
          :key="index"
          :style="{ height: getHeight(item.start, item.end) + '%' }"
          class="progress-bar-section"
        ></div>
        <div
          class="progress-indicator"
          :style="{ bottom: getIndicatorPosition() + '%' }"
        ></div>
        <div
          class="progress-gray-part"
          :style="{ bottom: getGrayPartPosition() + '%', height: getGrayPartHeight() + '%' }"
        ></div>
        <div
          v-for="(item, index) in data1"
          :key="`separator-${index}`"
          v-if="index < data1.length "
          :style="{ bottom: getLabelPosition(item.end) + '%' }"
          class="progress-separator"
        ></div>
      </div>
      <div class="progress-labels">
        <span style="bottom: 100%">10</span>
        <span
          v-for="(item, index) in data1"
          :key="index"
          :style="{ bottom: getLabelPosition(item.start) + '%' }"
        >
          {{ item.start }}
        </span>
      
      </div>
      <div class="progress-numbers">
        <span style="bottom: 100%">3600</span>
        <span
          v-for="(item, index) in data1"
          :key="index"
          :style="{ left: '100%', bottom: getLabelPosition(item.start) + '%' }"
        >
          {{ item.start_num }}
        </span>
      </div>
      <div
        class="current-value-label"
        :style="{ left: '100%', bottom: getIndicatorPosition() + '%' }"
      >
        {{ this_num }}
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const props = defineProps({
    this_num: {
      type: Number,
      default:2000,
      required: true
    }
  });
  
  const data1 = ref([
    { start: 8, end: 10, start_num: 3400, end_num: 3600, type: '高风险' },
    { start: 6, end: 8, start_num: 3000, end_num: 3400, type: '中风险' },
    { start: 4, end: 6, start_num: 2600, end_num: 3000, type: '中空期' },
    { start: 2, end: 4, start_num: 2000, end_num: 2600, type: '低风险' },
    
    { start: 0, end: 2, start_num: 0, end_num: 2000, type: '危险' },
  ]);
  
  const getGradient = () => {
    return 'linear-gradient(to top, green, red)';
  };
  
  const getHeight = (start, end) => {
    return ((end - start) / 10) * 100;
  };
  
  const getIndicatorPosition = () => {
    let position = 0;
    for (let i = 0; i < data1.value.length; i++) {
      const item = data1.value[i];
      if (props.this_num <= item.end_num) {
        position = ((props.this_num - item.start_num) / (item.end_num - item.start_num)) * ((item.end - item.start) / 10) * 100 + (item.start / 10) * 100;
        break;
      }
    }
    return position;
  };
  
  const getLabelPosition = (start) => {
    return (start / 10) * 100;
  };
  
  const getNumberPosition = (start, end) => {
    return ((start + end) / 2 / 10) * 100;
  };
  
  const getGrayPartPosition = () => {
    let position = 0;
    for (let i = 0; i < data1.value.length; i++) {
      const item = data1.value[i];
      if (props.this_num <= item.end_num) {
        position = ((props.this_num - item.start_num) / (item.end_num - item.start_num)) * ((item.end - item.start) / 10) * 100 + (item.start / 10) * 100;
        break;
      }
    }
    return position;
  };
  
  const getGrayPartHeight = () => {
    return 100 - getIndicatorPosition();
  };
  </script>
  
  <style scoped>
  .progress-bar-container {
    position: relative;
    width: 30px;
    height: 240px;
    margin: 20px 60px;
  }
  
  .progress-bar {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
  }
  
  .progress-bar-section {
    display: block;
    width: 100%;
  }
  
  .progress-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: black;
  }
  
  .progress-gray-part {
    position: absolute;
    left: 0;
    right: 0;
    background-color: #808080ba;
  }
  
  .progress-separator {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: white;
  }
  
  .progress-labels {
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .progress-numbers {
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 5px;
  }
  
  .current-value-label {
    position: absolute;
    left: 100%;
    transform: translateY(-50%);
    background-color: #333;
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
    margin-left: 5px;
  }
  </style>    